<template>
  <div id="pageArticle">
    <v-card flat>
      <v-card-text>
        <p class="display-1 text-xs-center my-3">{{ article.title}}</p>
        <p class="text-xs-center grey--text">
          创建于{{ article.created_at }}&nbsp;/&nbsp;
          <v-icon small>far fa-eye</v-icon>&nbsp;123&nbsp;/&nbsp;
          <v-icon small>far fa-comments</v-icon>
          &nbsp;123&nbsp;/&nbsp;
          更新于{{ article.updated_at }}&nbsp;
        </p>
        <div class="hr-line-dashed my-3"></div>
        <div class="content markdown-body text-wrap" v-html="article.content"></div>
        <div class="hr-line-dashed my-3"></div>
        <v-layout column>
          <v-flex text-xs-center>
            <v-btn dark color="rgb(221, 75, 57)">
              <v-icon>fas fa-thumbs-up</v-icon>&nbsp;
              <span class="subheading font-weight-medium">123</span>&nbsp;&nbsp;
            </v-btn>
          </v-flex>
          <v-flex class="mt-3">
            <p class="grey--text">
              <strong>版权声明：</strong>本博客所有文章除特别声明外，均采用
              <a
                href="https://creativecommons.org/licenses/by-nc/4.0/"
                rel="external nofollow"
                target="_blank"
              >CC BY-NC 4.0</a> 许可协议。转载请注明出处！
            </p>
          </v-flex>
        </v-layout>
      </v-card-text>
    </v-card>
    <v-card class="mt-3" flat>
      <v-card-text>
        <p class="title text-xs-center my-3">
          <v-icon>fas fa-comments</v-icon>&nbsp;讨论评论
        </p>
        <div class="hr-line-dashed my-3"></div>
        <v-layout>
          <v-flex>
            <Vssue :title="title"/>
          </v-flex>
        </v-layout>
      </v-card-text>
    </v-card>
  </div>
</template>
<script>
export default {
  name: 'app-article',
  data: () => ({
    title: '',
    article: []
  }),
  methods: {
    init () {
    }
  },
  created () {
  },
  mounted () {
    this.init()
  }
}
</script>
